<template>
  <div class="contain">
    <el-card>
      <div class="top">
        <el-button type="primary" size="small" @click="showDialog=true">添加权限</el-button>
      </div>
      <el-table
        :data="permissionList"
        row-key="id"
        border
        default-expand-all
        style="width: 100%"
      >
        <el-table-column prop="title" label="权限名称" />
        <el-table-column prop="code" label="权限标识" />
        <el-table-column prop="description" label="权限描述" />
        <el-table-column prop="address" label="操作">
          <template v-slot="{ row }">
            <el-button
              size="small"
              type="primary"
              @click="assigning(row)"
            >分配子权限</el-button>
            <el-button size="small" @click="edit(row.id)">编辑</el-button>
            <el-button
              size="small"
              type="danger"
              @click="delPerm(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      :title="parntPerm?`[${parntPerm}]分配子权限`:'添加权限'"
      :visible="showDialog"
      width="50%"
      @close="handleClose"
    >
      <el-form ref="ruleForm" :model="permission" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="permission.title" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="标识" prop="code">
          <el-input v-model="permission.code" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="permission.description" type="text" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="btnOk">确认</el-button>
        <el-button @click="handleClose">取消</el-button>
      </template>
    </el-dialog>

    <editDialog ref="editDialog" :edit-show-dialog.sync="editShowDialog" @getPermissionList="getPermissionList" />
  </div>
</template>

<script>
import editDialog from './component/editDialog.vue'
import { listToTreeData } from '@/utils/index'
import { getPermissionList, addPermisson, delPerm } from '@/api/permission'
export default {
  components: {
    editDialog
  },
  data() {
    return {
      permissionList: [],
      permission: {
        title: '',
        code: '',
        description: '',
        pid: '0',
        type: '1'
      },
      showDialog: false,
      editShowDialog: false,
      parntPerm: '',
      rules: {
        title: [
          { required: true, message: '请输入权限名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 6 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入权限标识', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入权限标识', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getPermissionList()
  },
  methods: {
    async getPermissionList() {
      const res = await getPermissionList()
      console.log(res.data)
      this.permissionList = listToTreeData(res.data, '0')
      console.log(this.permissionList)
    },
    async btnOk() {
      await addPermisson(this.permission)
      this.$message.success('操作成功')
      this.getPermissionList()
      this.handleClose()
    },
    assigning(parntPerm) {
      this.showDialog = true
      this.parntPerm = parntPerm.title
      this.permission.type = +parntPerm.type + 1 + ''
      this.permission.pid = parntPerm.id + ''
    },
    async edit(id) {
      await this.$refs.editDialog.getPermById(id)
      this.editShowDialog = true
    },
    async delPerm(id) {
      try {
        await this.$confirm('确定删除？')
        await delPerm(id)
        this.$message.success('操作成功')
        this.getPermissionList()
      } catch (error) {
        console.log(error)
      }
    },
    handleClose() {
      this.$refs.ruleForm.resetFields()
      this.showDialog = false
      this.permission = {
        title: '',
        code: '',
        description: '',
        pid: '0',
        type: '1'
      }
      this.parntPerm = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.contain {
  padding: 10px;
  .top {
    margin: 0 10px;
    padding: 10px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
